<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle()" width="600px" @ok="handleOk">
        <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" size="small">
            <a-tab-pane tab="商品基本信息" key="form1">
                <ProductForm ref="form1"/>
            </a-tab-pane>
        </a-tabs>
    </BasicDrawer>
</template>
<script lang="ts" setup>
    import {ref, useAttrs, getCurrentInstance, nextTick} from 'vue';
    import {BasicDrawer, useDrawerInner} from '@apps/antd-admin/src/components/Drawer';
    import ProductForm from './ProductForm.vue';
    // 声明Emits
    const emit = defineEmits(['success', 'register']);
    const attrs = useAttrs();
    //是否是更新模式
    const isUpdate = ref(true);
    //是否显示底部按钮
    const showFooter = ref(true);
    //当前选中tab
    const activeKey = ref('form1');
    //当前选中对象
    const selectData = ref();
    const ctx: any = getCurrentInstance();
    //表单赋值
    const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
        activeKey.value = 'form1';
        isUpdate.value = !!data?.isUpdate;
        //设置是否显示底部
        setDrawerProps({confirmLoading: false, showFooter: showFooter.value});
        selectData.value = data;
        handleTabChange();
    });

    /**
     * 获取标题
     */
    function getTitle() {
        return !isUpdate.value ? '新增商品基本信息' : '编辑商品基本信息';
    }

    /**
     * tab切换事件
     */
    function handleTabChange() {
        nextTick(() => {
            ctx.refs[activeKey.value].setData(selectData.value);
        });
    }

    /**
     * 确定按钮事件
     */
    async function handleOk() {
        ctx.refs[activeKey.value].handleSubmit({
            emit: emit,
            setDrawerProps,
            closeDrawer
        });
    }
</script>
